// Funktion zum Aendern des Popup-Inhaltes
function setPopupContent(content, html, id)
{
    // Ziel zum Target bestimmen
    target = $('#' + id);

    $(html).appendTo('#' + id);
    
    if (!target.hasClass('popup_target'))
    {
        target.addClass('popup_target');
    }    
    
    popup_content = $('div.popup_' + id + '  #pop_content');
    popup_arrow = $('div.popup_' + id + ' #pop_arrow');
    popup_content.html(content);
    popup_arrow.css('width', popup_content.parent().width());    
}



// Berechnet die Ausrichtung jedes Elements
function calculatePositions()
{
    // Popup-Menu
    element = $('.popup_target');    

    element.each(function() {
        
        popup = $(this).children('div#popup');
        toppos = parseInt(popup.children('div#top').html());
        pop_x = 0;
        pop_y = 0;

        if ($(this).width() > popup.width()) {
            pop_x = $(this).position().left + ($(this).width() / 2 - popup.width() / 2);
        } else {
            pop_x = $(this).position().left - (popup.width() / 2 - $(this).width() / 2);
        }

        if (toppos == 0) 
        {
            pop_y = $(this).position().top + $(this).height() + 30;
        } else {
            pop_y = $(this).position().top - popup.height() - 5;
        }

        if (pop_x < 0) {
            pop_x = 0;
        }
        
        if (pop_y < 0) {
            pop_y = 0;
        }

        popup.css('left', pop_x);
        popup.css('top', pop_y);       
    });   
    
    // Tutorial-Categories
    box = $('.description_box');
    
    box.each(function() {
        // Set height
        $(this).children('.topcontent').children('.background-categories').css('height', 0);
        // Get element
        categories = $(this).children('.topcontent').children('.background-categories').children('.background-category');  
        categories.each(function() {
            
            padding = 20;
            // Set left top position
            rand_x = 0;
            rand_y = 0;
            
            while (rand_x == 0 || (rand_x + $(this).width()) > parseInt($(this).parent('.background-categories').parent('.topcontent').width()) - padding) {
                rand_x = Math.floor(Math.random() * parseInt($(this).parent('.background-categories').parent('.topcontent').width())) + padding;
            }
            rand_y = Math.floor(Math.random() * (20 + parseInt($(this).parent('.background-categories').parent('.topcontent').height()))) + padding;
            category_root_left = parseInt($(this).parent('.background-categories').parent('.topcontent').position().left) + rand_x;
            category_root_top = parseInt($(this).parent('.background-categories').parent('.topcontent').position().top) + rand_y;
            $(this).css('left', category_root_left);
            $(this).css('top', category_root_top);
            
            // Sichtbarkeit anpassen
            $(this).parent('.background-categories').css('opacity', "0.3");
        });
    });
}

// Registriert alle Elemente (Muss am Ende aufgerufen werden!)
function registerElements()
{     
    calculatePositions();
    
    element = $('.popup_target');    

    element.each(function() {  
        
        $(this).not('div#popup').hover(function() {
            $(this).children('div#popup').css('display', 'inline-block');    
            $(this).children('div#popup').stop(true, true).animate({
                opacity: '1.0'
            }, 500);
        }, function() {
            $(this).children('div#popup').stop(true, true).animate({
                opacity: '0.0'
            }, 200, function() {
                $(this).css('display', 'none');
            });
        });
    });
    
    
    
    
}


